<template>
  <div>
    <u-form-grid :data="formGrid"></u-form-grid>

    <Modal
      v-model="importModal"
      title="上传价格数据"
      @on-ok="ok">
      <Upload
        :data="importData"
        :format="['csv']"
        :max-size="10240"
        :on-success="handleSuccess"
        type="drag"
        :action="fileUploadPath"
        :on-format-error="handleFormatError"
        :on-exceeded-size="handleMaxSize"
        :before-upload="handleBeforeUpload"
      >
        <Button type="ghost" icon="ios-cloud-upload-outline">上传文件</Button>
        <h1 v-show="uploading" style="color: green">上传中，请勿关闭当前窗口</h1>
      </Upload>
    </Modal>


    <Modal
      v-model="viewPriceListModal"
      title="查看价格数据"
      width="70%"
      @on-ok="ok">
      <goods-sales-spec :filterParams="this.filterParams" ref="spec" v-show="showPriceList"></goods-sales-spec>
    </Modal>

  </div>
</template>

<script>
  import GoodsSalesSpec from "./GoodsSalesSpec.vue";
  import axios from 'axios';

  export default {
    components: {
      "GoodsSalesSpec": GoodsSalesSpec,
    },
    name: 'GoodsInfo',
    data () {
      return {
        importModal: false,
        viewPriceListModal: false,
        showPriceList: false,
        importData: {goodsInfoId: null},
        uploading: false,
        filterParams: {},
        fileUploadPath: process.env.CONTEXT + "/file/priceData",
        formGrid: {
          options: {
            version: 'v2',
            url: {
              page: "/goodsInfo/page",
              save: "/goodsInfo/save",
              delete: "/goodsInfo/delete",
            }
          },
          tips: {title: "商品列表", content: "管理商品列表和价格数据"},
          toolbar: {
            create: {
              show: false, label: "添加"
            },
            delete: {
              show: true, label: "删除"
            },
            button: [
              {
                theme: "success", label: "清空商品缓存", icon: "plus", click: (selections) => {
                this.$Modal.confirm({
                  title: "提示", "content": "确定清空吗?", onOk: () => {
                    this.clearCache();
                  }
                });
              }
              }
            ],
          },

          form: {},
          table: {
            operation: {
              primaryKey: "id",
              buttons: [{
                key: "edit", show: true, "label": "修改产品", "theme": "primary", click: (row, index, _this) => {
                  this.$router.push({path: "publish", query: {goodsId: row["id"], mainImgUrl: row['mainImgUrl']}});
                }
              }, {
                key: "edit", show: true, "label": "导入价格数据", "theme": "primary", click: (row, index, _this) => {
                  this.importModal = true;
                  this.importData.goodsInfoId = row["id"];
                }
              }, {
                key: "view", show: true, "label": "查看价格数据", "theme": "default", click: (row, index, _this) => {
                  this.viewPriceListModal = true;
                  this.showPriceList = true;
                  this.$set(this.filterParams, "goodsInfoId", row["id"]);
                  window.setTimeout(() => {
                    this.$refs.spec.$emit("reloadData");
                  }, 500);
                }
              }],
              //默认的操作列内容。可以通过复写这个来重写自己的操作列
              column: {
                title: '操作',
                key: 'action',
                width: "20%"
              }
            },
            columns: [
              {title: '商品名称', key: 'name',renderType:"tooltip"},
              {title: '分类名称', key: 'categoryName',renderType:"tooltip"},
              {title: '标签', key: 'tags',renderType:"tooltip"},
              {title: '商品类型', key: 'goodsType',renderType:"tooltip"},
              {title: '参加活动', key: 'activityFullPathName',renderType:"tooltip"},
            ]
          }
        }
      }
    },
    methods: {
      ok () {
        this.importModal = false;
      },
      handleSuccess (res, file) {
        this.$Message.success({content: "上传成功!"});
        this.uploading = false;
      },
      handleFormatError (file) {
        this.uploading = false;

        this.$Notice.warning({
          title: '文件格式不正确',
          desc: '文件 ' + file.name + ' 格式不正确，请上传 csv 格式的文件，第一行为标题，第二行开始为数据。'
        });
      },
      handleMaxSize (file) {
        this.$Notice.warning({
          title: '超出文件大小限制',
          desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
        });
        this.uploading = false;
      },
      handleBeforeUpload () {
        if (confirm("上传新的文件会删除原有的数据,确定上传吗？")) {
          this.uploading = true;
          return true;
        }
        return false;
      },
      clearCache () {
        //初始化销售区域数据
        axios.post("/goodsInfo/clearCache").then(response => {
          this.$Notice.success({"title": "提示", "desc": "缓存清空成功！"});
        });
      }
    }
  }
</script>
